<template>
    <section class="sure-order--container content">

        <nav-bar
			title="确认订单"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

        <view>
            <div class="kaitong">
                <p>
                    开通权益
                    <span>
                        请选择
                        <iconArrow :point="1" />
                    </span>
                </p>
            </div>
        </view>
        <view class="score--container">
            <div class="score--content">
                <p>
                    积分
                    <span>
                        请选择银行
                        <iconArrow :point="1" />
                    </span>
                </p>
            </div>
        </view>
        <view>
            <div class="pay-way--container">
                <radio-group @change="radioChange">
                    <label
                        class="uni-list-cell uni-list-cell-pd radio"
                        v-for="(item, index) in items"
                        :key="item.value"
                    >
                        <div class="choose-content">
                            <p>
                                <!-- {{ item.name }}
                                <span>重庆 {{ item.num }}家影院</span>-->
                                <img :src="item.url" alt />
                                <span>{{ item.name }}</span>
                            </p>
                            <radio
                                color="#F24244"
                                :value="item.value"
                                :checked="index === current"
                            />
                        </div>
                    </label>
                </radio-group>
            </div>
        </view>
        <view class="fotter--container">
            <p>
                订单总价：
                <span>¥100.00</span>
            </p>
            <button type="warn">去支付</button>
            <apple-sliver></apple-sliver>
        </view>
    </section>
</template>

<script>
import iconArrow from "../components/icon-arrow";
import NavBar from "../../components/nav-bar";

export default {
    components: {
        iconArrow,
        NavBar,
    },
    data() {
        return {
            items: [
                {
                    url:
                        "",
                    name: "微信",
                    num: 10
                },
                {
                    url:
                        "https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=2b7785ca3412b31bc76cca2fbe235147/9c16fdfaaf51f3deec75a0e999eef01f3b297973.jpg",
                    name: "支付宝",
                    num: 100
                }
            ],
            current: 0
        };
    },
    onLoad() {},
    methods: {
        radioChange: function(evt) {
            for (let i = 0; i < this.items.length; i++) {
                if (this.items[i].value === evt.target.value) {
                    this.current = i;
                    break;
                }
            }
        }
    }
};
</script>
<style lang="scss">
.sure-order--container {
    overflow-y: scroll;
    min-height: 100vh;
    background-color: #f4f4f4;
    > view {
        width: 100%;
        background-color: #fff;
        .kaitong {
            width: 95%;
            height: px2vw(60);
            margin: 10px auto;
            background-color: #fff;
            p {
                font-size: px2vw($fz16);
                line-height: px2vw(60);
                span {
                    padding-right: px2vw(5);
                    float: right;
                    text-align: right;
                    color: $c-light;
                    font-size: px2vw($fz14);
                }
            }
        }
        &.score--container {
            border-bottom: px2vw(1) solid #ddd;
        }
        .score--content {
            width: 95%;
            height: px2vw(60);
            margin: 10px auto;
            p {
                font-size: px2vw($fz16);
                line-height: px2vw(60);
                span {
                    padding-right: px2vw(5);
                    float: right;
                    text-align: right;
                    color: $c-light;
                    font-size: px2vw($fz14);
                }
            }
        }
        .pay-way--container {
            width: 95%;
            // height: px2vw(60);
            margin: 0 auto;
            .radio {
                width: 100%;
                display: block;
                height: px2vw(60);
                &:not(:last-child) {
                    border-bottom: px2vw(1) solid #ddd;
                }
                .choose-content {
                    width: 95%;
                    margin: 0 auto;
                    &:after {
                        display: block;
                        content: "clear";
                        clear: both;
                        height: 0;
                        width: 100%;
                        overflow: hidden;
                    }
                    p {
                        width: 85%;
                        float: left;
                        font-size: px2vw($fz16);
                        line-height: px2vw(60);
                        position: relative;
                        img {
                            width: px2vw(38);
                            height: px2vw(32);
                            position: absolute;
                            margin: auto;
                            top: 0;
                            bottom: 0;
                            // margin-top: px2vw(14);
                        }
                        span {
                            // float: right;
                            // text-align: right;
                            // color: $c-light;
                            font-size: px2vw($fz14);
                            margin-left: px2vw(50);
                        }
                    }
                    radio {
                        margin-top: px2vw(15);
                        float: right;
                    }
                }
            }
        }
        &.fotter--container {
            width: 100%;
            position: fixed;
            bottom: 0;
            font-size: px2vw($fz14);
            text-align: center;
            background-color: #f4f4f4;
            p {
                margin: px2vw(10) 0;
                span {
                    color: #f24244;
                }
            }
            butto {
                height: px2vw(50);
                border-radius: 0;
            }
        }
    }
}
</style>